<!-- 蓝色登录页面2 -->
<template>
	<view class="box">
		<view class="img-a">
			<view class="t-b">
				宁乡市有奖举报与隐患治理平台
			</view>
			<view class="t-c">
				<button v-if="checked" class="myBtn" :class="newAva?'noborder':''" size="default" type="default" style="width: 144rpx;height: 144rpx;    padding: 0;
    border-radius: 50px;margin: 0;" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
					<image :src="avatarUrl" />
				</button>
				<button size="default" class="myBtn" type="default" style="width: 144rpx;height: 144rpx;    padding: 0;
    border-radius: 50px;margin: 0;" v-else @click="handleQueding">
					<image :src="avatarUrl" />
				</button>
				<view class="login">
					<button v-if="checked && noLoginStatus" size="default" type="default" style="background: none;"
						open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">一键登录 ></button>
					<view class="tel" v-else-if="checked && !noLoginStatus">{{userInfo.userLogin}}</view>
					<button v-else size="default" type="default" style="background: none;" @click="handleQueding">一键登录
						></button>
					<view class="tigs">{{noLoginStatus?'未登记手机号':'已登录'}}</view>
				</view>
			</view>
			<view class="agreement" v-if="noLoginStatus">
				<u-checkbox-group v-model="checkedItem" @change="onChangeAgree">
					<u-checkbox :name="1" activeColor="rgba(15, 83, 172, 1);"></u-checkbox>
				</u-checkbox-group>
				<view class="agreement-txt">宁乡市应急管理局安全生产举报<span class="privacy" @click="togouserxieyi">隐私保护</span>指引
				</view>

			</view>
		</view>
		<view class="bigBox" :class="noLoginStatus?'top':'middleTop'">
			<view class="btnBox btn1" @click="handleJubao">
				<image class="icon" src="../../../static/home/icon1.png" />
				<view>我要举报</view>
				<image class="right" src="../../../static/home/right.png" />
			</view>
			<view class="btnBox btn2" @click="handleToKnow">
				<image class="icon" src="../../../static/home/icon2.png" />
				<view>举报须知</view>
				<image class="right" src="../../../static/home/right.png" />
			</view>
			<view class="btnBox btn3" @click="handleToMine">
				<image class="icon" src="../../../static/home/icon3.png" />
				<view>个人中心</view>
				<image class="right" src="../../../static/home/right2.png" />
			</view>
			<view class="btnBox btn3" @click="handleToMessage">
				<view v-if="num" class="num">{{num}}</view>
				<image class="icon" src="../../../static/home/icon4.png" />
				<view>消息提醒</view>
				<image class="right" src="../../../static/home/right2.png" />
			</view>
		</view>

		<u-popup :show="show" mode="center" :round="8">
			<view class="popupBox">
				<view v-if="type == 1" class="toptitle">举报须知</view>
				<view v-if="type == 2" class="toptitle">突出问题提示</view>
				<view class="webBox">
					<scroll-view v-if="type == 1" :style="{
				        height: '760rpx'
				    }" scroll-y="true" :scroll-top="scrollTop">
						<image class="image2" v-if="type == 1"
							src="https://dztest2.obs.cn-southwest-2.myhuaweicloud.com/nxqmrhtest/other/20240511/1715426748139206.png" />
					</scroll-view>
					<scroll-view v-if="type == 2" :style="{
					    height: '760rpx'
					}" scroll-y="true" :scroll-top="scrollTop">
						<image class="image1" v-if="type == 2"
							src="https://dztest2.obs.cn-southwest-2.myhuaweicloud.com/nxqmrhtest/other/20240511/1715426746836495.png" />
					</scroll-view>
				</view>
				<view class="footer">
					<u-button class="left" shape="circle" :plain="true" text="取消" @click="concle"></u-button>
					<u-button v-if="type == 1" :disabled="btnDisabled" shape="circle" color="#1764CE" type="primary"
						:text="sec==0?'下一步':`下一步${sec}s`" @click="handleNext(2)"></u-button>
					<u-button v-else :disabled="btnDisabled" shape="circle" color="#1764CE" type="primary"
						:text="sec==0?'下一步':`下一步${sec}s`" @click="handleNext(3)"></u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	import {
		mapMutations
	} from "vuex";
	import userImg from '../../../static/home/user.png'
	import md5 from '@/common/md5.min.js';
	export default {
		data() {
			return {
				roleId: 0,

				isShowPwd: true,
				show: false,
				avatarUrl: userImg,
				// 验证码获取秒数
				sec: '10', //这是重新获取验证码的倒计时(可根据需求修改)
				btnDisabled: true,
				type: 1,
				noLoginStatus: true,
				newAva: '',
				userInfo: {
					userLogin: '',
				},
				checked: false,
				checkedItem: [],
				scrollTop: 0,
				num: 0
			};
		},
		onLoad() {

		},
		onShow() {
			let that = this;
			this.checkToken()
		},
		methods: {
			checkToken() {
				const c = uni.getStorageSync('userInfo');
				if (!c || c.token == '') {
					this.noLoginStatus = true
				} else {
					this.noLoginStatus = false
					this.userInfo = uni.getStorageSync('userInfo');
					if (uni.getStorageSync('userInfo').headSculpture != '') {
						this.avatarUrl = uni.getStorageSync('userInfo').headSculpture
						this.newAva = uni.getStorageSync('userInfo').headSculpture
					}
					this.getNum()
					this.checked = true
					this.checkedItem = [1]
				}
			},
			handleQueding() {
				uni.$u.toast("请先阅读并勾选以下协议")
			},
			async onChooseAvatar(e) {
				this.avatarUrl = e.detail.avatarUrl
				this.newAva = e.detail.avatarUrl
				if (!this.noLoginStatus) {
					let params = {
						headSculpture: this.avatarUrl,
					}
					uni.$u.http.put(`/manage/api/userInfo/upHeadSculpture`, params).then(res => {
						let data = uni.getStorageSync('userInfo')
						data.headSculpture = this.avatarUrl
						if (res.code == 0) {
							uni.setStorageSync('userInfo', data);
							uni.$u.toast("设置成功")
						}

					})
				}

			},

			getPhoneNumber: function(e) {
				if (e.detail.errMsg === "getPhoneNumber:ok") {
					//这里受机型与模拟器影响，errmsg信息各不相同，只能判断用户是否点击了允许按钮来判断，

					var ivObj = e.detail.iv
					var telObj = e.detail.encryptedData
					var codeObj = "";
					var that = this;
					wx.login({
						provider: 'weixin',
						success: res => {
							uni.$u.http.get(`/manage/api/userInfo/getPhoneNum/${e.detail.code}`).then(
								ret => {
									let params = {
										userLogin: ret.data,
										code: res.code,
										iv: e.detail.iv,
										encryptedData: e.detail.encryptedData
									}
									if (this.newAva) {
										params.headSculpture = this.newAva
									}
									that.getEmpower(params)
								})

						}
					});
				} else {
					//如果没有走以上，均为点击了拒绝授权
					console.log('用户拒绝授权')
					// 通常会在这里弹出模态框，引导用户点击允许授权
				}

			},
			togouserxieyi() {
				uni.navigateTo({
					url: '/pages/home/useragree'
				})
			},
			onChangeAgree(e) {
				this.checked = !this.checked
			},
			//微信授权接口
			getEmpower(params) {
				const that = this
				uni.$u.http.post(`/manage/api/userInfo/wxLogin`, params)
					.then(res => {
						if (res.code == 0) {
							//由于这里逻辑特殊 后续登录会替换掉状态值 所以单独保存一份状态值来做判断
							uni.setStorageSync('userInfo', res.data);
							this.noLoginStatus = false
							this.getNum()
							this.userInfo = res.data
							this.checked = true
							this.checkedItem = [1]
						}
					}).catch(err => {})
			},


			handleJubao() {
				// // 跳转
				// uni.navigateTo({
				// 	url: `/pages/home/report`
				// })
				// return
				if (this.noLoginStatus) {
					return uni.$u.toast("请先登录")
				}
				this.show = true
				this.timedown(this.sec)
			},
			//倒计时
			timedown: function(num) {
				let that = this;
				if (num == 0) {
					that.btnDisabled = false; // 不禁用获取验证码按钮
					that.sec = 0
					return clearTimeout();
				} else {
					that.btnDisabled = true; // 禁用获取验证码按钮
					this.timer = setTimeout(function() {
						that.sec = num - 1
						that.timedown(num - 1);
					}, 1000); //定时每秒减一  
				}
			},
			concle() {
				this.show = false
				this.sec = 10
				this.type = 1
				clearTimeout(this.timer)
			},
			handleNext(type) {
				this.scrollTop = 0
				if (type == 2) {
					this.sec = 10
					this.type = type
					this.timedown(this.sec)
				} else if (type == 3) {
					// 跳转
					uni.navigateTo({
						url: `/pages/home/report`
					})
					setTimeout(() => {
						this.concle()
					}, 100)


				}
			},
			handleToKnow() {
				if (this.noLoginStatus) {
					return uni.$u.toast("请先登录")
				}
				// 跳转
				uni.navigateTo({
					url: `/pages/home/know`
				})
			},
			handleToMine() {
				if (this.noLoginStatus) {
					return uni.$u.toast("请先登录")
				}
				// 跳转
				uni.navigateTo({
					url: `/pages/home/mine`
				})
			},
			handleToMessage() {
				if (this.noLoginStatus) {
					return uni.$u.toast("请先登录")
				}
				// 跳转
				uni.navigateTo({
					url: `/pages/home/message`
				})

			},
			getNum() {
				if (this.noLoginStatus) {
					return
				}
				uni.$u.http.get(`/manage/api/message/getUnreadNum`)
					.then(res => {
						if (res.code == 0) {
							this.num = res.data
						}
					}).catch(err => {})
			}
		}
	};
</script>
<style lang="scss">
	page {
		background: #F5F6F7;
	}

	.img-a {
		width: 100%;
		padding-bottom: 60rpx;
		opacity: 1;
		background: url('../../../static/home/bg4.jpg');
		background-size: 100% 100%;

		.t-b {
			font-size: 44rpx;
			font-weight: 500;
			letter-spacing: 0px;
			color: rgba(255, 255, 255, 1);
			padding-top: 60rpx;
			text-align: center;
			text-shadow: 0px 4px 16px rgba(9, 73, 176, 1);
		}

		.t-c {
			margin-top: 60rpx;
			display: flex;
			justify-content: center;

			.myBtn {
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.noborder {
				border: 1px solid rgba(255, 255, 255, 0.2);
			}

			image {
				width: 144rpx;
				height: 144rpx;
			}

			.login {
				margin-left: 16rpx;
				font-size: 36rpx;
				font-weight: 500;
				color: rgba(0, 0, 0, 1);

				.tel {
					margin-top: 20rpx;
				}

				.tigs {
					margin-top: 28rpx;
					font-size: 26rpx;
					font-weight: 400;
					color: rgba(51, 72, 130, 1);
				}
			}
		}

		image {
			width: 96rpx;
			height: 96rpx;
		}
	}

	.bigBox {}

	.middleTop {
		margin-top: -20rpx;
	}

	.top {
		margin-top: -50rpx;
	}

	.agreement {
		margin-top: 60rpx;
		padding-left: 50rpx;
		display: flex;
		align-items: center;
		font-size: 28rpx;
		font-weight: 400;
		color: #2b2b2b;

		.agreement-txt {
			display: flex;
			justify-items: center;

			.privacy {
				color: rgba(15, 83, 172, 1);
			}
		}
	}

	.btnBox {
		margin: 20rpx 40rpx;
		padding: 0 60rpx;
		height: 128rpx;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;

		.icon {
			width: 76rpx;
			height: 76rpx;
		}

		.right {
			width: 32rpx;
			height: 32rpx;
		}

		.num {
			position: absolute;
			left: 98rpx;
			top: 10rpx;
			width: 40rpx;
			height: 40rpx;
			border-radius: 50%;
			background: rgba(232, 80, 67, 1);
			border: 4rpx solid rgba(255, 255, 255, 1);
			font-size: 24rpx;
			font-weight: 400;
			color: rgba(255, 255, 255, 1);
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.btn1 {
		background: #334882;
		color: #FFFFFF;
	}

	.btn2 {
		background: #F2853D;
		color: #FFFFFF;
	}

	.btn3 {
		background: #FFFFFF;
		color: #334882;
	}

	.toptitle {
		font-size: 36rpx;
		font-weight: 700;
		color: rgba(51, 51, 51, 1);
		text-align: center;
		margin: 20rpx 0;
	}

	.webBox {
		width: calc(100vw - 64rpx);
		padding-bottom: 144rpx;

		.image1 {
			width: calc(100vw - 64rpx);
			height: calc(16*(100vw - 64rpx));
		}

		.image2 {
			width: calc(100vw - 64rpx);
			height: calc(3.8*(100vw - 64rpx));
		}
	}

	.popupBox {
		position: relative;

		.footer {
			width: 100%;
			padding: 32rpx 56rpx;
			box-sizing: border-box;
			background-color: #fff;
			display: flex;
			justify-content: space-between;
			position: absolute;
			bottom: 0;
			left: 0;
			border-radius: 16rpx;

			.u-button--info.data-v-2bf0e569 {
				margin-right: 20rpx;
			}
		}
	}
</style>
